<template>
   <div class="appTable">
    <div class="appTable__tool">
      <div class="appTable__tool__left">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            title="刷新"
            class="refreshBtnClass"
            @click="DoRefresh"
            :class="{ rotation_ani: loading }"
          ></el-button>
          <el-button
            type="info"
            icon="el-icon-sunrise"
            title="回到默认"
            class="refreshBtnClass"
            @click="DoInit"
          ></el-button>
        </el-button-group>

        <slot name="tools"></slot>
        <slot name="third"></slot>
      </div>
      <div class="appTable__tool__right">
        <el-button
          type="primary"
          :icon="isFilter ? 'el-icon-receiving' : 'el-icon-files'"
          :title="isFilter ? '收起筛选选项' : '更多筛选选项'"
          @click="()=>{ isFilter = !isFilter} "
        ></el-button>

        <el-input v-model="searchword" placeholder="快速搜索内容">
          <template #prefix>
             <i class="el-input__icon el-icon-search"></i>
          </template>
        </el-input>
      </div>
    </div>
    <!-- 状态显示 -->
    <div class="appTable_tool_filter" v-show="isFilter">
      <div>
        <template v-if="showStatusFilter">
          <DefaultStatusSelect
            ref="DefaultStatusSelect"
            @onDataChanged="onStatusChanged"
          ></DefaultStatusSelect>
        </template>
        <slot name="filter"></slot>
        <slot name="secondFilter"></slot>
        <slot name="thirdFilter"></slot>
      </div>
      </div>
    <div class="appTable__tool__fixed">
      <slot name="fixedFilter"></slot>
    </div>

    <!-- 默认的Table控件 -->
    <el-table
      :data="datas"
      stripe
      border
      class="appTable__datas"
      header-row-class-name="table-header-row"
      v-loading="loading"
    >
      <template v-if="expand">
        <el-table-column type="expand">
          <template #default="props">
            <slot name="expand" :props="props"></slot>
          </template>
        </el-table-column>
      </template>

      <template v-for="item in columns">
        <template v-if="item.scope">
          <el-table-column
            :label="item.label"
            :key="item.prop"
            :width="item.width"
          >
            <template #default="scope">
              <slot name="columnSlotFirst" :props="scope"></slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="!item.scope">
          <!-- 设置时间 -->
          <template v-if="item.prop == 'cdate'">
            <el-table-column
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
            >
              <template #default="scope">
                {{ dateFormat("YYYY-mm-dd HH:MM:SS", scope.row.cdate) }}
              </template>
            </el-table-column>
            <!-- <template slot-scope="scope">
                  {{dateFormat("YYYY-mm-dd",scope.row.cdate)}} 1111
                </template>                 -->
          </template>

          <template v-else>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="item.prop"
              :width="item.width"
            >
            </el-table-column>
          </template>
        </template>
      </template>

      <el-table-column
        label="当前状态"
        width="100px"
        v-if="showStatusColumn"
      >
        <template #default="scope">
            <StatusTag :status="scope.row.status"></StatusTag>            
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" class-name="column__tool">
        <template #default="scope">
          <template v-if="tableToolConfig.canRecover">
            <StatusButton
              v-if="scope.row.status == 1"
              :serverUrl="serverUrl"
              :id="scope.row.id"
              :title="
                scope.row.title ||
                scope.row.name ||
                scope.row.username ||
                scope.row[titleProp]
              "
              :type="0"
              @onSuccess="onToolSuccess"
            ></StatusButton>
          </template>
          <template v-if="tableToolConfig.canEdit">
            <router-link
              :to="{ path: routeUrl + '/edit', query: { id: scope.row.id } }"
            >
                <!-- 只要不是删除，都可以修改 -->
                <el-button
                  type="primary"
                  size="mini"
                  v-if="scope.row.status != 2 && scope.row.status != 3"
                  plain
                  icon="el-icon-edit"
                  class="column__tool__buttom"
                  >修改&nbsp;</el-button
                >
            </router-link>
          </template>
          <template v-if="tableToolConfig.canDelete">
            <StatusButton
              v-if="scope.row.status == 1"
              :serverUrl="serverUrl"
              :id="scope.row.id"
              :title="scope.row.title || scope.row[titleProp]"
              @onSuccess="onToolSuccess"
              :type="2"
            ></StatusButton>
          </template>
          <template v-if="tableToolConfig.canDisable">
            <StatusButton
              v-if="scope.row.status == 0"
              :serverUrl="serverUrl"
              :id="scope.row.id"
              :title="scope.row.title || scope.row[titleProp]"
              @onSuccess="onToolSuccess"
              :type="1"
            ></StatusButton>
          </template>

          <slot name="bindInfo" :data="scope.row"></slot>
          <slot name="columnSlotTool" :props="scope.row.id"></slot>
          <slot name="columnSlotDataTool" :props="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <div class="appTable__footer">
      <div class="appTable__footer_page">
        <el-pagination
          :pager-count="5"
          class="el-pag"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page_size"
          layout="sizes,total,next, pager,prev,jumper "
          :total="total"
        ></el-pagination>
      </div>
      <div class="appTable__footer__info">
        <p>
          <i class="el-icon-info mr-1"></i>
          <slot name="table__footer__info"></slot>
        </p>
      </div>
    </div>
  </div>
</template>  

<script lang="ts">
import { defineComponent } from 'vue'
import { getListApi } from "@/manager-core/api/table/table";

import { DefaultStatusSelect } from "@/manager-core/component/select/"

import { StatusTag,StatusButton } from "./impl"


export default defineComponent({
  name: 'TableContainer',
  components: {
    DefaultStatusSelect,
    StatusTag,
    StatusButton
  },
  props:{
    // api 基础地址
    serverUrl:{
      type: String,
      required: true
    },

    // route URL
    routeUrl:{
      type: String,
      required: true
    },

    // 是否自动初始化
    autoInit:{
      type: Boolean,
      default: true
    },

    //  名称标题 
    titleProp:{
      type: String
    },

    // 搜索的关键词
    searchProp:{
      type : String
    },


    // 列设置
    columns:{
      type : Array
    },

    // table config
    tableToolConfig:{
      type : Object,
      default : {
        canRecover:true,
        canEdit:true,
        canDelete:true,
        canDisable:true
      }
    },

    // 显示 status 过滤项
    showStatusFilter : {
      type : Boolean,
      default : true
    },

    // 显示状态列
    showStatusColumn : {
      type : Boolean,
      default : true
    },
    
    
    // table 展开项
    expand:{
      type: Boolean,
      default: false
    }



  },
  data(){
    return {
      showFilter : true,    //
      isFilter : false,
      loading : false,
      isRefreshing : false,
      
      datas : [],

      searchword : "",
      status : 0,
      dataMap : {},

      //分页
      currentPage : 1,
      page_size : 10,
      total : 0
    }
  },

  methods:{
    initTable() {
      if(this.loading){
        return;
      }

      this.loading = true;

      // 包裹参数
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let serverUrl = this.serverUrl;
      let tableFilterData = {
        // 第二部
        status: _this.status,
        searchword: _this.searchword,
        searchProp: _this.searchProp,

        dataMap: _this.dataMap,
      };

      let start = (_this.currentPage - 1) * _this.page_size;

      let tablePageData = {
        current: _this.currentPage,
        start: start,
        size: _this.page_size,
      };


      getListApi(serverUrl, tableFilterData, tablePageData)
        .then((response:any) => {
          let total = response.total;
          let datas;
          if (response.records) {
            datas = response.records;
          } else if (response.datas) {
            datas = response.datas;
          } else {
            datas = response;
          }
          _this.datas = datas;
          _this.total = total;
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          _this.loading = false;
        });
    },

    onToolSuccess(){
        this.initTable();
    },

    onStatusChanged(val:any){
      this.status = val;

    },

    DoRefresh(){
      let _this = this;
      if (!_this.isRefreshing) {
        _this.isRefreshing = true;

        _this.initTable();

        setTimeout(() => {
          _this.isRefreshing = false;
        }, 0.7 * 1000);
      }
    },

    // 返回默认
    DoInit(){
      this.searchword = "";
      this.status = 0;
      this.currentPage = 1;
      this.page_size = 10;
    },

    handlePageSizeChange(val:any){
      this.page_size = val;
    },

    handlePageCurrentChange(val:any){
      this.currentPage = val;
    }
  },

  watch: {
    currentPage(val){
      console.log("currentPage is changed",this.currentPage)
      this.initTable();
    },
    page_size(val){
      console.log("page_size is changed",this.page_size)
      this.initTable();
    },
    status(){
      this.initTable();
    },
    searchword(){
      console.log("searchword changed: ",this.searchword)
      this.initTable();
    },
  },

  created() {},

  mounted(){
      if (this.autoInit) {
        this.initTable();
      }  
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>



</style>
